<!-- Dom模板 -->
<template>
  <div class="firstPage-home">
    <!-- Dom内容 -->
    <p>首页</p>
    <div class="firstPage-revenue">
      <p>网站报名人数概况</p>
      <el-row :gutter="20" class="firstPage-content">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <div class="firstPage-left">
              <i class="el-icon-s-order"></i>
            </div>
            <div class="firstPage-right">
              <p>今日报名人数</p>
              <p>19</p>
            </div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <div class="firstPage-left">
              <i class="el-icon-user"></i>
            </div>
            <div class="firstPage-right">
              <p>本周报名人数</p>
              <p>99</p>
            </div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <div class="firstPage-left">
              <i class="el-icon-user"></i>
            </div>
            <div class="firstPage-right">
              <p>本月报名人数</p>
              <p>999</p>
            </div>
          </div></el-col
        >
       
      </el-row>
    </div>
    <div class="firstPage-statistics">
      <p>近一个月报名人数</p>
      <div class="firstPage-num">
        <p><span>订单数量：</span><span>999</span></p>
        <p><span>待处理人数：</span><span>9999</span></p>
    
      </div>
      
      <div id="firstPage-main" style="height:300px"></div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      usenamelist:[],
      namenumlist:[],
    };
  },
  // components: { Header, HeaderTop },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  async mounted() {
   let res = await this.$axios.get('/api/answer/curriculum').then((res)=>{
     return res.data
   })
   
   this.usenamelist = res.map((item)=>{

     return  JSON.parse(item.teacherClassList).reduce((num,it)=>{
       return num+Number(it.shopping)
     },0)
   })
  
   this.namenumlist = res.map((item)=>{
     return  item.teacher
   })
  this.getecharts();
  },
  // Vue方法定义
  methods: {
   
    getecharts() {
      var echarts = require("echarts");

      var chartDom = document.getElementById("firstPage-main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data:[...this.namenumlist],
        },
        axisPointer: {
          z: 100,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [...this.usenamelist],
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
ul {
  list-style: none;
}
/* @import url(''); 引入css类 */
.firstPage-home {
  padding: 25px;
  min-width: 1100px;
}
.firstPage-revenue {
  background: white;
  padding: 15px;
  margin-top: 20px;
}
.firstPage-content {
  margin-top: 20px;
}
.firstPage-content > el-col > div {
  height: 20px;

  text-align: center;
  padding: 20px;
}
.grid-content {
  padding: 26px;
  display: flex;
}
.firstPage-left {
  flex-grow: 1;
  text-align: center;
  font-size: 26px;
}
.firstPage-right {
  flex-grow: 1;
}
.firstPage-content p,
i {
  color: white;
}
.firstPage-content > .el-col:nth-child(1) div {
  background: #ff7970;
  border-radius: 5px;
}
.firstPage-content > .el-col:nth-child(2) div {
  background: #ffd344;
  border-radius: 5px;
}
.firstPage-content > .el-col:nth-child(3) div {
  background: #648cff;
  border-radius: 5px;
}
.firstPage-content > .el-col:nth-child(4) div {
  background: #4fccb0;
  border-radius: 5px;
}
#firstPage-main {
 
  height: 400px;
}
.firstPage-statistics{
 padding: 20px;
  background: white;
  margin-top: 20px;
}
.canvas {
  width: 100%;
}
.firstPage-num{
  position:relative;
}
.firstPage-num>p:nth-child(1){
  position:relative;
  left:150px;
  top:20px;
}
.firstPage-num>p:nth-child(2){
  position:absolute;
  left:350px;
  top:20px;
}
.firstPage-num>p:nth-child(3){
  position:absolute;
  right:20px;
  top:20px;
}

</style>